<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <template #title>
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group>
      </template>
      <div class="pd-16">
        <el-form
          :label-position="labelPosition"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
					size="mini"
        >
        
        <el-form-item label="测试" prop="t">
            <l-secret-level-select
              v-model="ruleForm.t"
            />
          </el-form-item>
          <el-form-item label="汉字验证" prop="chineseCharacters">
            <el-input
              v-model="ruleForm.chineseCharacters"
              placeholder="please enter汉字"
            ></el-input>
          </el-form-item>
          <el-form-item label="英文验证" prop="englishCharacters">
            <el-input
              v-model="ruleForm.englishCharacters"
              placeholder="please enter英文字母"
            ></el-input>
          </el-form-item>

          <el-form-item label="数字验证" prop="num">
            <el-input
              v-model="ruleForm.num"
              placeholder="please enter数字"
            ></el-input>
          </el-form-item>

          <el-form-item label="数字验证2" prop="num2">
            <el-input
              v-model="ruleForm.num2"
              placeholder="保留小数点后两位"
            ></el-input>
          </el-form-item>

          <el-form-item label="password验证" prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              show-password
              placeholder="please enterpassword(以字母开头，长度在6-18之间,只能包含字母、数字和下划线)"
            ></el-input>
          </el-form-item>
          <el-form-item label="强password验证" prop="password2">
            <el-input
              v-model="ruleForm.password2"
              type="password"
              show-password
              placeholder="必须包含大小写字母和数字，不能使用特殊字符，长度在8-16之间"
            ></el-input>
          </el-form-item>
          <el-form-item label="号码验证" prop="telephone">
            <el-input
              v-model="ruleForm.telephone"
              placeholder="please enter手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="IP验证" prop="ip">
            <el-input
              v-model="ruleForm.ip"
              placeholder="please enterIP地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="域名验证" prop="httpUrl">
            <el-input v-model="ruleForm.httpUrl" placeholder="please enter域名地址">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
          <el-form-item label="正浮点数" prop="justFloat">
            <el-input
              v-model="ruleForm.justFloat"
              placeholder="please enter正浮点数"
            ></el-input>
          </el-form-item>
          <el-form-item label="负浮点数" prop="backFloat">
            <el-input
              v-model="ruleForm.backFloat"
              placeholder="please enter负浮点数"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即绑定</el-button
            >
            <el-button>cancel</el-button>
          </el-form-item>
        </el-form>
      </div>
    </l-panel>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right", // 方向
      sendmsg: "发送验证码",
      isSend: true,
      ruleForm: {
        chineseCharacters: "",
        englishCharacters: "",
        num: "",
        num2: "",
        password: "",
        password2: "",
        httpUrl: "",
        ip: "",
        telephone: "",
        justFloat: "", //正浮点数
        backFloat: "",
      },
      rules: {
        justFloat: [
          {
            pattern: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$",
            message: "please enterconfirm的正浮点数",
            trigger: "blur",
          },
        ],
        backFloat: [
          {
            pattern: "^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$",
            message: "please enter正确的负浮点数",
            trigger: "blur",
          },
        ],
        telephone: [
          {
            pattern: "^[1][3,5,7,8][0-9]\\d{8}$",
            message: "please enter正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          {
            pattern: "^[a-zA-Z]w{5,17}$",
            message: "please enter正确的password格式",
            trigger: "blur",
          },
        ],
        password2: [
          {
            pattern: "^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$",
            message: "please enter正确的password格式",
            trigger: "blur",
          },
        ],
        num: [
          {
            pattern: "^[0-9]*$",
            message: "please enter数字",
            trigger: "blur",
          },
        ],
        num2: [
          {
            pattern: "^[0-9]+(.[0-9]{1,2})?$",
            message: "please enter正确的数字格式",
            trigger: "blur",
          },
        ],
        ip: [
          {
            pattern:
              "((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))",
            message: "please enter正确的ip地址",
            trigger: "blur",
          },
        ],
        chineseCharacters: [
          {
            pattern: "[\u4e00-\u9fa5]",
            message: "please enter正确的汉字",
            trigger: "blur",
          },
        ],
        englishCharacters: [
          {
            pattern: "^[A-Za-z]+$",
            message: "please enter正确的英文字母",
            trigger: "blur",
          },
        ],
        httpUrl: [
          {
            pattern:
              "^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{2,})+$",
            message: "please enter正确的域名地址",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
